<template>
  <div>
   <input type="text" v-model="message">
   <p>{{reversedMessage}}</p>
   <p>{{reversedMessage2}}</p>
   <!---->
   <h3>getter/setter</h3>
   <p>{{didiFamily}}</p>
   <button @click="changeValue('我们')">setter</button>
   <h3>缓存</h3>
   <p>{{cacheEl}}</p>
   <button @click="timeChange(cacheEl)">时间</button>
   <p>{{twoTime}}</p>
   <h3>不缓存</h3>
   <p>{{cacheEl}}</p>
   <button @click="newTimeChange(noCacheEl)">时间</button>
   <p>{{newTime}}</p>
  </div>
</template>
<script>
export default {
  name: "ComputedProperty",
  data() {
    return {
      message: "Hello",
      reversedMessage2: '',
      didi: 'didi',
      family: 'family',
      welcome: 'welcome to join us',
      twoTime: 'oo',
      newTime: 'oo'
    };
  },
  methods:{
    changeValue(newVal){
      this.didiFamily = newVal;
    },
    timeChange(val){
      this.twoTime = val;
    },
    newTimeChange(val){
      this.newTime = val;
    }
  },
  computed: {
    // 1
    reversedMessage: function() {
      return this.message.split("").reverse().join("");
    },
    //2 getter/setter
    didiFamily:{
      get: function(){
        return this.didi + ' ' + this.family
      },
      set: function(newVal){
        let names = newVal.split(' ');
        console.log(names)
        this.didi = names[0];
        this.family = names[1]
      }
    },
    //3 缓存(依赖非实时观察数据)
    cacheEl: function(){
      return Date.now() + this.welcome;
    },
    //4 设置cache
    noCacheEl: {
      cache: false,
      get: function(){
        return Date.now() + this.welcome;
      }
    }
  },
  watch: {
    message: function(){
      this.reversedMessage2 = this.message.split("").reverse().join("-");
    }
  }
};
</script>

